<template>
    <div class="layout">
        <!-- 头部 -->
        <el-header class="header">
            <div class="company-name">智能立体库系统</div>
            <el-menu :default-active="activeIndex" class="nav" mode="horizontal" @select="handleSelect"
                background-color="#1f2d3d" text-color="#ffffff" active-text-color="#409EFF">
            </el-menu>
        </el-header>

        <!-- 主体内容 -->
        <div class="main-content">
            <!-- 侧边栏 -->
            <el-aside class="sidebar">
                <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect"
                    background-color="#f0f2f5" text-color="#333333" active-text-color="#409EFF">
                    <el-sub-menu index="0">
                        <template #title>工作台</template>
                        <el-menu-item index="0-1">
                            <RouterLink to="/Workbench/NodeManagement">工作流节点管理</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="0-2">
                            <RouterLink to="/Workbench/AgentCharge">我的待办</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="0-3">
                            <RouterLink to="/Workbench/Done">我的已办</RouterLink>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="1">
                        <template #title>业务管理</template>
                        <el-menu-item index="1-1">
                            <RouterLink to="/Receiving/Procurement">采购入库管理</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <RouterLink to="/Receiving/ReturnGoods">销售退货管理</RouterLink>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>入库管理</template>
                        <el-menu-item index="2-1">
                            <RouterLink to="/Storage/ReceiptGoods">收货盘点管理</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="2-2">
                            <RouterLink to="/Storage/PutStorage">入库记录</RouterLink>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>出库管理</template>
                        <el-menu-item index="3-1">
                            <RouterLink to="/Outbound/Sales">销售出库管理</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="3-2">
                            <RouterLink to="/Outbound/Record">出库记录</RouterLink>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>移库管理</template>
                        <el-menu-item index="4-1">
                            <RouterLink to="/Move/TransferManagement">移库单管理</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="4-2">
                            <RouterLink to="/Move/Change">物资库位变动记录</RouterLink>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="5">
                        <template #title>库存管理</template>
                        <el-menu-item index="5-1">
                            <RouterLink to="/Inventory/UsageRate">货位使用率</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="5-2">
                            <RouterLink to="/Inventory/InventoryLists">库存列表</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="5-3">
                            <RouterLink to="/Inventory/LibraryList">库位列表</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="5-4">
                            <RouterLink to="/Inventory/EmptyPosition">空库位</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="5-5">
                            <RouterLink to="/Inventory/InStock">有货库位</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="5-6">
                            <RouterLink to="/Inventory/RunningWater">库存流水记录</RouterLink>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="6">
                        <template #title>物资管理</template>
                        <el-menu-item index="6-1">
                            <RouterLink to="/Material/MaterialTypes">物资类型</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="6-2">
                            <RouterLink to="/Material/Management">物资管理</RouterLink>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="7">
                        <template #title>数据查询</template>
                        <el-menu-item index="7-1">
                            <RouterLink to="/Queries/QueriesNlog">日志查询</RouterLink>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="8">
                        <template #title>基础数据</template>
                        <el-menu-item index="8-1">
                            <RouterLink to="/Basic/DictionaryTypes">字典类型</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="8-2">
                            <RouterLink to="/Basic/DictionaryItem">字典项管理</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="8-3">
                            <RouterLink to="/Basic/Supplier">供应商管理</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="8-4">
                            <RouterLink to="/Basic/Warehouse">库房管理</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="8-5">
                            <RouterLink to="/Basic/ReservoirArea">库区管理</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="8-6">
                            <RouterLink to="/Basic/LocationWarehouse">库位管理</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="8-7">
                            <RouterLink to="/Basic/Pallet">托盘管理</RouterLink>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="9">
                        <template #title>权限管理</template>
                        <el-menu-item index="9-1">
                            <RouterLink to="/RBAC/User">用户管理</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="9-2">
                            <RouterLink to="/RBAC/Role">角色管理</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="9-3">
                            <RouterLink to="/RBAC/Menu">菜单管理</RouterLink>
                        </el-menu-item>
                        <el-menu-item index="9-4">
                            <RouterLink to="/RBAC/Button">按钮管理</RouterLink>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>

            <!-- 主内容区域 -->
            <main class="content">
                <RouterView />
            </main>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { RouterLink, RouterView } from 'vue-router';

const activeIndex = ref('1');

const handleSelect = (index: string) => {
    activeIndex.value = index;
};
</script>

<style scoped>
.layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-family: Arial, sans-serif;
    background-color: #ffffff;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    background-color: #1f2d3d;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.company-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
}

.nav {
    border-bottom: none;
}

.main-content {
    display: flex;
    flex: 1;
}

.sidebar {
    width: 240px;
    background-color: #f0f2f5;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.content {
    flex: 1;
    padding: 2rem;
    background-color: #ffffff;
    margin: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-menu-item {
    padding: 0 20px;
}

.el-menu-item a {
    text-decoration: none;
    color: inherit;
}

.header {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    height: 60px;
    /* 设置一个高度 */
}

.company-name {
    font-size: 20px;
    /* 根据需要调整字体大小 */
}
</style>